<template>
  <div id="login">
    <form>
      <div id="form">
        <h1>LOGIN</h1>
        <el-input autofocus  validate-event maxlength="10" prefix-icon="el-icon-user-solid" v-model="adminUser.userName" placeholder="请输入账号"></el-input>
        <br>
        <el-input prefix-icon="el-icon-unlock" maxlength="16" show-password v-model="adminUser.passWord" placeholder="请输入密码"></el-input>
        <br>
        <div id="cap">
          <el-input style="width: 220px"  prefix-icon="el-icon-info" v-model="adminUser.captcha" placeholder="输入验证码"></el-input>
          <captcha ref="captcha"></captcha>
        </div>
        <br><br>
        <el-button @click="submitForm" style="width: 100%" type="primary">登入</el-button>
      </div>
    </form>

  </div>
</template>

<script>
import captcha from "../../components/common/Captcha";

export default {
  data() {
    return {
      adminUser: {
        userName: "",
        passWord: "",
        captcha: "",
        ip: returnCitySN["cip"]
      }
    };
  },
  components: {
    captcha
  },
  methods: {
    submitForm() {
      this.$store
          .dispatch("user/login", this.adminUser)
          .then((res) => {
            if (res.code!=100)
              this.$refs.captcha.refresh()
          })
          .catch(err => {
            console.log(err);
            this.$refs.captcha.refresh()
          });
    }
  }
};
</script>

<style lang="stylus" scoped>
#login
  width 100%
  height 100vh
  background-color rgb(41,52,68)
  display flex
  justify-content center
  align-items center

#form
  height 400px
  width 380px
  background-color white
  border-radius 10%
  box-sizing border-box
  padding 20px
  display flex
  align-items  center
  flex-wrap wrap
  flex-direction column
  & h1
    cursor pointer

#cap
  width 100%
  display flex
  justify-content space-between
  align-items center
</style>